<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>选择位置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        html,body{
            height:100%; 
            width:100%; 
            overflow:hidden; margin:0;
            padding:0;
        }
        body{
            height:100%; 
            width:100%; 
            overflow:hidden; 
            margin:0;
            padding:0;
        }
        div{
            height:83%;
        }
        .btn-info {
            color: #fff;
            background-color: #3498db;
            border-color: #3498db;
        }
        .btn {
            display: inline-block;
            margin-bottom: 0;
            font-weight: normal;
            text-align: center;
            vertical-align: middle;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            padding: 6px 12px;
            font-size: 12px;
            line-height: 1.42857143;
            border-radius: 3px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 15px 0px 0px 15px;
        }
    </style>
</head>
<body>
    <div class="con">
        <iframe id="mapPage" width="100%" height="100%" src="" >
        </iframe>
    </div>
    <input type="hidden" id="lat"/>
    <input type="hidden" id="lng" />
    <input type="hidden" id="poiaddress" />
    <input type="hidden" id="cityname" />
    <input type="hidden" id="poiname" />
</body>
<script src="layer/layer.js"></script>
<script type="text/javascript" src="layer/jquery.min.js"></script>
<script>
    var key = "CMDBZ-L2DAX-VRT4J-ZUNE3-D5AWT-YFBOM";
    var appname = "机构活动";
    var address = parent.$(".address").val();
    var lat = parent.$('.lat').val();
    var lng = parent.$('.lng').val();
//    var coord = '';
    if(lat=='' || lng==''){
        lat = "22.543541";
        lng = "114.057969";
    }
    var coord = lat + "," + lng;
//    if(coord){
        $('#mapPage').attr('src', "https://apis.map.qq.com/tools/locpicker?search=1&type=1&coord="+coord+"&key="+key+"&referer="+appname);
//    }else{
//        $('#mapPage').attr('src', "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key="+key+"&referer="+appname);
//    }
</script>
<script>
    window.addEventListener('message', function(event) { //地图监听事件
        var loc = event.data;
        console.log(loc);
        if (loc && loc.module == 'locationPicker') {    //赋值到input框
            $("#lat").val(loc.latlng.lat);              //纬度
            $("#lng").val(loc.latlng.lng);              //经度
            $("#poiaddress").val(loc.poiaddress);       //详细地址
            $("#cityname").val(loc.cityname);           //市
            $("#poiname").val(loc.poiname);             //地址 例：XX小区 即名称

            parent.$(".address").val(loc.poiaddress + loc.poiname);    // 传递值到父页面
            parent.$(".lat").val(loc.latlng.lat);                      // 传递值到父页面
            parent.$(".lng").val(loc.latlng.lng);                      // 传递值到父页面
            var index = parent.layer.getFrameIndex(window.name);        // 先得到当前iframe层的索引
            parent.layer.close(index);          
        }
    }, false);
</script>
</html>